<template>
  <n-config-provider id="body w-full"
                     :theme-overrides="naiveTheme" style="min-width: 1100px;"
  >
    <module-header name="app" value="/manage/user" is-telescreen />

    <main-content>
      <div class="flex items-center w-full mt-4">
        <div class="w-1/3 flex items-center">
          <div class="w-10">姓名:</div>
          <n-input v-model:value="searchName" placeholder="请输入姓名" />
        </div>
        <div class="w-1/3 flex items-center ml-4">
          <div class="w-16">手机号:</div>
          <n-input placeholder="请输入手机号" />
        </div>
        <div class="w-1/3 flex items-center justify-end">
          <n-button type="primary" class="mr-4" @click="pageUpdate(1)">查询</n-button>
          <n-button>重置</n-button>
        </div>
      </div>
      <div class="mt-4 flex items-center">
        <div class="text-xl flex items-center w-1/3">
          用户管理
        </div>
        <div class="flex items-center justify-end w-2/3">
          <n-button type="primary" class="mr-4" @click="isShowCreateUserList = true">新增</n-button>
          <n-button class="mr-4">导入</n-button>
          <n-button>导出</n-button>
        </div>
      </div>
      <n-data-table v-model:checked-row-keys="checkedRowKeys" v-model:data="data"
                    class="mt-4"
                    :columns="columns"
                    :pagination="pagination"
                    :on-update:page="pageUpdate"
      />
      <n-form-modal v-model:show="isShowCreateUserList" title="新增用户" :fields="createUserList"
                    :on-confirm="onCreateUserConfirm"
      />
      <n-form-modal v-model:show="isShowUpdateUserList" title="修改用户信息" :fields="updateUserList"
                    :on-confirm="onUpdateUserConfirm"
      />
      <n-modal v-model:show="showDelModal"
               preset="dialog"
               title="确认"
               content="确认删除?"
               positive-text="确认"
               negative-text="算了"
               @positive-click="showDelModal = false"
               @negative-click="showDelModal = false"
      />
    </main-content>
  </n-config-provider>
</template>

<script lang="ts" setup>
import { onMounted, ref, h, reactive } from 'vue'
import { naiveTheme } from '../../shared/theme/naive_theme'
import { NConfigProvider, NDataTable, NButton, NInput, NModal } from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import { nav } from '../../shared/client/window'
import { axiosReq } from '../../shared/client/axios'
import { actErr } from '../../shared/client/interact'
import ModuleHeader from '../../components/common/module_header.vue'
import MainContent from '../../components/common/main_content.vue'
import { reqGetUserList } from './manage.def'
import NFormModal, { Item as FormModalItem } from '../../components/naive/n_form_modal.vue'

//定义表格数据的类型
type RowData = {
  username: string,
  logName: string,
  position: string,
  department: string,
  key: number
}

//初始化表格的响应式数据
const data = ref<RowData[]>([{
  username: 'string',
  logName: 'string',
  position: 'string',
  department: 'string',
  key: 0
}])

const searchName = ref('')

//定义表格一页多少行
const pagination = {
  pageSize: 3
}
//初始化表格的复选框响应式数据
const checkedRowKeys = ref<Array<string | number>>([])

//定义表格的列
const columns: DataTableColumns<RowData> = [
  {
    type: 'selection',
    options: [
      'all',
      'none',
    ]
  },
  {
    title: '姓名',
    key: 'username'
  },
  {
    title: '登录名',
    key: 'logName'
  },
  {
    title: '角色类型',
    key: 'position'
  },
  {
    title: '部门',
    key: 'department'
  },
  {
    title: '操作',
    key: 'operate',
    render (row) {
      return buttons.map((item, index) => (
        h(
          NButton,
          {
            size: 'small',
            key: index, // 添加唯一的 key，通常使用数组索引作为 key
            onClick: () => item.func(event,row)
          },
          { default: () => item.label },
        )
      ))
    }
  }
]

const buttons = [{ label:'修改',func:update }, { label:'删除',func:update }, { label:'重置密码',func:update }]

//是否展示新增用户表单
const isShowCreateUserList = ref(false)

//定义新增用户表单
const createUserList: FormModalItem[] = [{
  title: '姓名',
  placeholder: '请输入',
  type: 'input',
  key: 'username'
}, {
  title: '登录名',
  placeholder: '请输入',
  type: 'input',
  key: 'logName',
}, {
  title: '所属部门',
  placeholder: '请选择',
  type: 'select',
  key: 'department',
  options: [
    { label: '集团', value: '1' },
    { label: '子公司', value: '2' },
    { label: '市场部', value: '3' },
  ]
}, {
  title: '岗位',
  placeholder: '请选择',
  type: 'select',
  key: 'job',
  options: [
    { label: '董事长', value: '1' },
    { label: '总经理', value: '2' },
    { label: '副经理', value: '3' },
  ]
}, {
  title: '角色',
  placeholder: '请选择',
  type: 'select',
  key: 'position',
  options: [
    { label: '无', value: 'null' },
    { label: '董事长', value: '1' },
    { label: '总经理', value: '2' },
    { label: '副经理', value: '3' },
  ]
}]
//确认提交新增用户表单
async function onCreateUserConfirm(form: any) {
  console.log(form)
}

const showDelModal = ref(false)

//是否展示更新用户表单
const isShowUpdateUserList = ref(false)

//定义更新用户表单
const updateUserList: FormModalItem[] = reactive([{
  title: '姓名',
  placeholder: '请输入',
  type: 'input',
  key: 'username',
  value: '123'
}, {
  title: '登录名',
  placeholder: '请输入',
  type: 'input',
  key: 'logName',
}, {
  title: '角色',
  placeholder: '请选择',
  type: 'select',
  key: 'position',
  options: [
    { label: '无', value: 'null' },
    { label: '董事长', value: '1' },
    { label: '总经理', value: '2' },
    { label: '副经理', value: '3' },
  ]
}, {
  title: '所属部门',
  placeholder: '请选择',
  type: 'select',
  key: 'department',
  options: [
    { label: '集团', value: '1' },
    { label: '子公司', value: '2' },
    { label: '市场部', value: '3' },
  ]
}])

//确认提交修改用户表单
async function onUpdateUserConfirm(form: any) {
  console.log(form)
}

onMounted(async ()=>{

  const res = await reqGetUserList(axiosReq,0,searchName.value,pagination.pageSize)
  console.log(res)

  data.value = res.data.data.map(item => ({
    username: item.username,
    logName: item.logName,
    position: item.position,
    department: '市场部',
    key: item.id
  }))

  addObject(1,res.data.maxPage)
})

//扩充虚假对象，保证页数与数据库相同
function addObject(nowPage,maxPage) {
  var Objects = Array.from({ length: (maxPage - nowPage) * pagination.pageSize }, () => ({
    username: '',
    logName: '',
    position: '',
    department: '',
    key: 0
  }))

  data.value = data.value.concat(Objects)

  Objects = Array.from({ length: (nowPage - 1) * pagination.pageSize }, () => ({
    username: '',
    logName: '',
    position: '',
    department: '',
    key: 0
  }))

  data.value = Objects.concat(data.value)
}

//更新用户信息
function update(event,data) {

  if (event.target.innerText === '修改') {
    updateUserList[0].value = data.username
    updateUserList[1].value = data.logName
    updateUserList[2].value = data.position
    updateUserList[3].value = data.department
    isShowUpdateUserList.value = true
  } else if(event.target.innerText === '删除') {
    showDelModal.value = true
  }
}

//分页跳转回调函数
async function pageUpdate(value) {
  console.log(value)
  const res = await reqGetUserList(axiosReq,0,searchName.value,pagination.pageSize,value)
  console.log(res)
  data.value = res.data.data.map(item => ({
    username: item.username,
    logName: item.logName,
    position: item.position,
    department: '市场部',
    key: item.id
  }))

  addObject(value,res.data.maxPage)
}
</script>

<style>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
</style>
